<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">

<title>Slider Pro</title>

<link rel="stylesheet" type="text/css" href="../dist/css/slider-pro.min.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="css/examples.css" media="screen"/>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.2.min.js"></script>
<script type="text/javascript" src="../dist/js/jquery.sliderPro.min.js"></script>

<script type="text/javascript">
	$( document ).ready(function( $ ) {
		$( '#example3' ).sliderPro({
			width: 960,
			height: 500,
			fade: true,
			arrows: true,
			buttons: false,
			fullScreen: true,
			shuffle: true,
			smallSize: 500,
			mediumSize: 1000,
			largeSize: 3000,
			thumbnailArrows: true,
			autoplay: false
		});
	});
</script>

</head>

<body>

	<div id="example3" class="slider-pro">
		<div class="sp-slides">
			<div class="sp-slide">
				<img class="sp-image" src="../src/css/images/blank.gif" 
					data-src="https://bqworks.net/slider-pro/images/image1_medium.jpg"
					data-small="https://bqworks.net/slider-pro/images/image1_small.jpg"
					data-medium="https://bqworks.net/slider-pro/images/image1_medium.jpg"
					data-large="https://bqworks.net/slider-pro/images/image1_large.jpg"
					data-retina="https://bqworks.net/slider-pro/images/image1_large.jpg"/>

				<p class="sp-layer sp-white sp-padding"
					data-horizontal="50" data-vertical="50"
					data-show-transition="left" data-show-delay="400">
					Lorem ipsum
				</p>

				<p class="sp-layer sp-black sp-padding"
					data-horizontal="180" data-vertical="50"
					data-show-transition="left" data-show-delay="600">
					dolor sit amet
				</p>

				<p class="sp-layer sp-white sp-padding"
					data-horizontal="315" data-vertical="50"
					data-show-transition="left" data-show-delay="800">
					consectetur adipisicing elit.
				</p>
			</div>

	        <div class="sp-slide">
	        	<img class="sp-image" src="../src/css/images/blank.gif" 
	        		data-src="https://bqworks.net/slider-pro/images/image2_medium.jpg" 
					data-small="https://bqworks.net/slider-pro/images/image2_small.jpg"
					data-medium="https://bqworks.net/slider-pro/images/image2_medium.jpg"
					data-large="https://bqworks.net/slider-pro/images/image2_large.jpg"
	        		data-retina="https://bqworks.net/slider-pro/images/image2_large.jpg"/>

				<h3 class="sp-layer sp-black sp-padding" 
					data-horizontal="40" data-vertical="40" 
					data-show-transition="left">
					Lorem ipsum dolor sit amet
				</h3>

				<p class="sp-layer sp-white sp-padding" 
					data-horizontal="40" data-vertical="100" 
					data-show-transition="left" data-show-delay="200">
					consectetur adipisicing elit
				</p>

				<p class="sp-layer sp-black sp-padding" 
					data-horizontal="40" data-vertical="160" data-width="350" 
					data-show-transition="left" data-show-delay="400">
					sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				</p>
			</div>

			<div class="sp-slide">
				<img class="sp-image" src="../src/css/images/blank.gif" 
					data-src="https://bqworks.net/slider-pro/images/image3_medium.jpg" 
					data-small="https://bqworks.net/slider-pro/images/image3_small.jpg"
					data-medium="https://bqworks.net/slider-pro/images/image3_medium.jpg"
					data-large="https://bqworks.net/slider-pro/images/image3_large.jpg"
					data-retina="https://bqworks.net/slider-pro/images/image3_large.jpg"/>

				<p class="sp-layer sp-white sp-padding" 
					data-position="centerCenter" data-vertical="-50" 
					data-show-transition="right" data-show-delay="500" >
					Lorem ipsum dolor sit amet
				</p>

				<p class="sp-layer sp-black sp-padding" 
					data-position="centerCenter" data-vertical="50" 
					data-show-transition="left" data-show-delay="700">
					consectetur adipisicing elit
				</p>
			</div>

			<div class="sp-slide">
				<img class="sp-image" src="../src/css/images/blank.gif" 
					data-src="https://bqworks.net/slider-pro/images/image4_medium.jpg" 
					data-small="https://bqworks.net/slider-pro/images/image4_small.jpg"
					data-medium="https://bqworks.net/slider-pro/images/image4_medium.jpg"
					data-large="https://bqworks.net/slider-pro/images/image4_large.jpg"
					data-retina="https://bqworks.net/slider-pro/images/image4_large.jpg"/>

				<p class="sp-layer sp-black sp-padding"
					data-position="bottomLeft" data-vertical="0" data-width="100%"
					data-show-transition="up">
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				</p>
			</div>

			<div class="sp-slide">
				<img class="sp-image" src="../src/css/images/blank.gif" 
					data-src="https://bqworks.net/slider-pro/images/image5_medium.jpg" 
					data-small="https://bqworks.net/slider-pro/images/image5_small.jpg"
					data-medium="https://bqworks.net/slider-pro/images/image5_medium.jpg"
					data-large="https://bqworks.net/slider-pro/images/image5_large.jpg"
					data-retina="https://bqworks.net/slider-pro/images/image5_large.jpg"/>

				<p class="sp-layer sp-white sp-padding" 
					data-vertical="5%" data-horizontal="5%" data-width="90%" 
					data-show-transition="down" data-show-delay="400">
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				</p>
			</div>

			<div class="sp-slide">
				<img class="sp-image" src="../src/css/images/blank.gif" 
					data-src="https://bqworks.net/slider-pro/images/image6_medium.jpg" 
					data-small="https://bqworks.net/slider-pro/images/image6_small.jpg"
					data-medium="https://bqworks.net/slider-pro/images/image6_medium.jpg"
					data-large="https://bqworks.net/slider-pro/images/image6_large.jpg"
					data-retina="https://bqworks.net/slider-pro/images/image6_large.jpg"/>

				<p class="sp-layer sp-white sp-padding" 
					data-horizontal="10" data-vertical="10" data-width="300">
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				</p>
			</div>

			<div class="sp-slide">
				<img class="sp-image" src="../src/css/images/blank.gif" 
					data-src="https://bqworks.net/slider-pro/images/image7_medium.jpg" 
					data-small="https://bqworks.net/slider-pro/images/image7_small.jpg"
					data-medium="https://bqworks.net/slider-pro/images/image7_medium.jpg"
					data-large="https://bqworks.net/slider-pro/images/image7_large.jpg"
					data-retina="https://bqworks.net/slider-pro/images/image7_large.jpg"/>

				<p class="sp-layer sp-black sp-padding" 
					data-position="bottomLeft" data-horizontal="5%" data-vertical="5%" data-width="90%" 
					data-show-transition="up" data-show-delay="400">
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				</p>
			</div>

			<div class="sp-slide">
				<img class="sp-image" src="../src/css/images/blank.gif" 
					data-src="https://bqworks.net/slider-pro/images/image8_medium.jpg" 
					data-small="https://bqworks.net/slider-pro/images/image8_small.jpg"
					data-medium="https://bqworks.net/slider-pro/images/image8_medium.jpg"
					data-large="https://bqworks.net/slider-pro/images/image8_large.jpg"
					data-retina="https://bqworks.net/slider-pro/images/image8_large.jpg"/>
			</div>

			<div class="sp-slide">
				<img class="sp-image" src="../src/css/images/blank.gif" 
					data-src="https://bqworks.net/slider-pro/images/image9_medium.jpg" 
					data-small="https://bqworks.net/slider-pro/images/image9_small.jpg"
					data-medium="https://bqworks.net/slider-pro/images/image9_medium.jpg"
					data-large="https://bqworks.net/slider-pro/images/image9_large.jpg"
					data-retina="https://bqworks.net/slider-pro/images/image9_large.jpg"/>

				<p class="sp-layer sp-black sp-padding" 
					data-horizontal="50" data-vertical="50"
					data-show-transition="down" data-show-delay="500">
					Lorem ipsum dolor sit amet
				</p>

				<p class="sp-layer sp-white sp-padding" 
					data-horizontal="50" data-vertical="100"
					data-show-transition="up" data-show-delay="500">
					consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				</p>
			</div>

			<div class="sp-slide">
				<img class="sp-image" src="../src/css/images/blank.gif" 
					data-src="https://bqworks.net/slider-pro/images/image10_medium.jpg" 
					data-small="https://bqworks.net/slider-pro/images/image10_small.jpg"
					data-medium="https://bqworks.net/slider-pro/images/image10_medium.jpg"
					data-large="https://bqworks.net/slider-pro/images/image10_large.jpg"
					data-retina="https://bqworks.net/slider-pro/images/image10_large.jpg"/>
			</div>
		</div>

		<div class="sp-thumbnails">
			<img class="sp-thumbnail" src="https://bqworks.net/slider-pro/images/image1_thumbnail.jpg"/>
			<img class="sp-thumbnail" src="https://bqworks.net/slider-pro/images/image2_thumbnail.jpg"/>
			<img class="sp-thumbnail" src="https://bqworks.net/slider-pro/images/image3_thumbnail.jpg"/>
			<img class="sp-thumbnail" src="https://bqworks.net/slider-pro/images/image4_thumbnail.jpg"/>
			<img class="sp-thumbnail" src="https://bqworks.net/slider-pro/images/image5_thumbnail.jpg"/>
			<img class="sp-thumbnail" src="https://bqworks.net/slider-pro/images/image6_thumbnail.jpg"/>
			<img class="sp-thumbnail" src="https://bqworks.net/slider-pro/images/image7_thumbnail.jpg"/>
			<img class="sp-thumbnail" src="https://bqworks.net/slider-pro/images/image8_thumbnail.jpg"/>
			<img class="sp-thumbnail" src="https://bqworks.net/slider-pro/images/image9_thumbnail.jpg"/>
			<img class="sp-thumbnail" src="https://bqworks.net/slider-pro/images/image10_thumbnail.jpg"/>
		</div>
    </div>

</body>
</html>